<template>
    <div class="page">
        <div class="login-box">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px" class="demo-ruleForm login-container" status-icon>
                <h3 class="title">系统登陆</h3>
                <el-form-item prop="account">
                    <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号" id="loginEmail"></el-input>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off" placeholder="密码" id="loginPassword"></el-input>
                    <label id="showPasswordToggle">
                        <el-checkbox v-model="checked" id="showPasswordCheck">显示密码</el-checkbox>
                    </label>
                    <router-link to="/" class="forget-pass">忘记密码？</router-link>
                </el-form-item>
                <el-form-item>
                    <el-button class="submit-btn" type="primary" @click.native.prevent="handleSubmit" :loading="logining">
                        登陆
                    </el-button>
                </el-form-item>

                <el-form-item>
                    <router-link to="/register">
                        <el-button class="submit-btn">
                            注册
                        </el-button>
                    </router-link>

                </el-form-item>

            </el-form>
        </div>
    </div>

</template>
<script>
import { requestLogin } from "@/api/user";
export default {
  name: "app-login",
  data() {
    return {
      logining: false,
      fromUrl: "/",
      ruleForm: {
        account: "admin",
        checkPass: "123456"
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        checkPass: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      checked: false
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.logining = true;
          const loginParams = {};
          requestLogin(loginParams)
            .then(data => {
              this.logining = false;
              this.$message({
                message: "登陆成功！",
                type: "success"
              });
              console.log(data);
              console.log(this.fromUrl);
              this.$router.push(this.fromUrl);
              
            })
            .catch(err => {
              this.logining = false;
              console.log(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.fullPath !== "/register" && !from.meta.errorPage) {
        console.log("to : {}" ,to )
        console.log("from : {}" ,from )
        console.log("next : {}" ,next )
        vm.fromUrl = from.fullPath;
      }
    });
  }
};
</script>
<style scoped>
.page {
  background-color: #eff3f4;
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 16px;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: block;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  margin: 0;
  padding: 2.25em;
  box-sizing: border-box;
  border: solid 1px #ddd;
  border-radius: 0.5em;
  font-family: "Source Sans Pro", sans-serif;
}

.title {
  text-align: center;
  margin-bottom: 15px;
}

.submit-btn {
  width: 100%;
}

.forget-pass {
  float: right;
  color: #bbbbbb;
}
</style>

